<template>
  <div class="main">
    <InputSearch
      class="search_right"
      v-model:value="name"
      placeholder="请输入要查询的用户名称"
      enter-button
      @search="onSearch"
      style="width: 240px"
    ></InputSearch>
  </div>
</template>

<script lang="ts" setup>
import { InputSearch } from 'ant-design-vue';
import { ref } from 'vue';

const emit = defineEmits(['query']);
const name = ref<string>('');
function onSearch() {
  emit('query', { userName: name.value });
}
</script>

<style lang="less" scoped>
.main {
  width: 600px;
  .search_left {
    width: 70px;
    float: left;
    margin-top: 4px;
  }
  .search_right {
    float: left;
    width: 500px;
  }
}
</style>
